<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="shortcut icon" href="/img/favicon.ico" />
</head>

<body class="">
<!-- banner部分 -->
<div class="scroll-container-1">
    <!-- 导航 -->
    <!-- 公共头部 begine-->
    <div th:replace="common/header :: xxxHeader"></div>
    <!-- 公共头部 end-->

    <!-- 案例列表部分 -->
    <div class="common-container common-case-container">


        <div id="listBody">
            <!--<div class="common-case-list scroll-reveal-1" style="; visibility: visible;  -webkit-transform: translateY(0) scale(1); opacity: 1;transform: translateY(0) scale(1); opacity: 1;-webkit-transition: -webkit-transform 1s ease-in-out 0s, opacity 1s ease-in-out 0s; transition: transform 1s ease-in-out 0s, opacity 1s ease-in-out 0s; ">-->
                <!--<div class="case-info-contain">-->
                    <!--<h4 class="info-title">新作|白宮——致生活与生命的本质</h4>-->
                    <!--<div class="info-text">-->
                        <!--<p>四年时光，三篇设计札记，讲述一座私宅。 献给主人与他们的家。</p>-->
                    <!--</div>-->
                    <!--<div class="info-more" id="divcss5">-->
                        <!--<img src="http://www.divcss5.com/yanshi/2014/2014063001/images/1.jpg" />-->
                    <!--</div>-->
                <!--</div>-->
                <!--<a class="case-img-contain" href="###">-->
                    <!--<img src="http://www.tkchu.com.tw/uploadFile/d0257a47-1244-4ab6-93a9-12eff52e4426jpg" alt="">-->
                    <!--<img src="" alt="">-->
                <!--</a>-->
            <!--</div>-->


            <!--<div class="common-case-list scroll-reveal-1"  style="; visibility: visible;  -webkit-transform: translateY(0) scale(1); opacity: 1;transform: translateY(0) scale(1); opacity: 1;-webkit-transition: -webkit-transform 1s ease-in-out 0s, opacity 1s ease-in-out 0s; transition: transform 1s ease-in-out 0s, opacity 1s ease-in-out 0s; ">-->
                <!--<div class="case-info-contain">-->
                    <!--<h4 class="info-title">北京保利和光尘樾·和院光舍</h4>-->
                    <!--<div class="info-text">-->
                        <!--<p>一个和光有关的项目<br>居于光<br>栖息于自然与时间</p>-->
                    <!--</div>-->
                    <!--<div class="info-more" id="divcss5">-->
                        <!--<img src="http://www.divcss5.com/yanshi/2014/2014063001/images/1.jpg" />-->
                    <!--</div>-->
                <!--</div>-->
                <!--<a class="case-img-contain switch-to-two" href="###">-->
                    <!--<img src="http://www.tkchu.com.tw/uploadFile/d0257a47-1244-4ab6-93a9-12eff52e4426jpg" alt="">-->
                    <!--<img src="http://www.tkchu.com.tw/uploadFile/d0257a47-1244-4ab6-93a9-12eff52e4426jpg" alt="">-->
                <!--</a>-->
            <!--</div>-->




        </div>


        <!-- 加载动画 -->
        <div class="case-loading-gif common-container" style="display: none;">
            <img src="/images/loading-gear.gif"  alt="">
        </div>


        <!-- 页脚部分 begin-->
        <div th:replace="common/footer :: xxxFooter"></div>
        <!-- 页脚部分 end-->

    </div>

    <audio controls="controls" style="display: none;"></audio></body>

<style type="text/css">#yddContainer{display:block;font-family:Microsoft YaHei;position:relative;width:100%;height:100%;top:-4px;left:-4px;font-size:12px;border:1px solid}#yddTop{display:block;height:22px}#yddTopBorderlr{display:block;position:static;height:17px;padding:2px 28px;line-height:17px;font-size:12px;color:#5079bb;font-weight:bold;border-style:none solid;border-width:1px}#yddTopBorderlr .ydd-sp{position:absolute;top:2px;height:0;overflow:hidden}.ydd-icon{left:5px;width:17px;padding:0px 0px 0px 0px;padding-top:17px;background-position:-16px -44px}.ydd-close{right:5px;width:16px;padding-top:16px;background-position:left -44px}#yddKeyTitle{float:left;text-decoration:none}#yddMiddle{display:block;margin-bottom:10px}.ydd-tabs{display:block;margin:5px 0;padding:0 5px;height:18px;border-bottom:1px solid}.ydd-tab{display:block;float:left;height:18px;margin:0 5px -1px 0;padding:0 4px;line-height:18px;border:1px solid;border-bottom:none}.ydd-trans-container{display:block;line-height:160%}.ydd-trans-container a{text-decoration:none;}#yddBottom{position:absolute;bottom:0;left:0;width:100%;height:22px;line-height:22px;overflow:hidden;background-position:left -22px}.ydd-padding010{padding:0 10px}#yddWrapper{color:#252525;z-index:10001;background:url(chrome-extension://eopjamdnofihpioajgfdikhhbobonhbb/ab20.png);}#yddContainer{background:#fff;border-color:#4b7598}#yddTopBorderlr{border-color:#f0f8fc}#yddWrapper .ydd-sp{background-image:url(chrome-extension://eopjamdnofihpioajgfdikhhbobonhbb/ydd-sprite.png)}#yddWrapper a,#yddWrapper a:hover,#yddWrapper a:visited{color:#50799b}#yddWrapper .ydd-tabs{color:#959595}.ydd-tabs,.ydd-tab{background:#fff;border-color:#d5e7f3}#yddBottom{color:#363636}#yddWrapper{min-width:250px;max-width:400px;}</style>

<script src="/js/jquery-2.2.4.min.js" charset="utf-8">
</script>
<script src="/layui/layui.js" charset="utf-8">
</script>
<script src="/js/vue.js" charset="utf-8">
</script>

<script>

    var total= 0;

//    var app = new Vue({
//        el : "#listBody",
//        data : {
//            anliArray : []
//        }
//    });

    layui.use('flow', function(){
        var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
        var flow = layui.flow;
        flow.load({
            elem: '#listBody', //指定列表容器
            isAuto: false,
            done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                var lis = [];
                //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                $.get('/shejishi?sjStyle=0&page='+page, function(res){
                    //假设你的列表返回在data集合中

                    layui.each(res.data.data, function(index, item) {

                        var xxx = "";
                        if (total % 2 == 0) {
                            xxx = '<div class="common-case-list scroll-reveal-1" style="; visibility: visible;  -webkit-transform: translateY(0) scale(1); opacity: 1;transform: translateY(0) scale(1); opacity: 1;-webkit-transition: -webkit-transform 1s ease-in-out 0s, opacity 1s ease-in-out 0s; transition: transform 1s ease-in-out 0s, opacity 1s ease-in-out 0s; ">\n' +
                                '                <div class="case-info-contain">\n' +
                                '                    <h4 class="info-title">'+item.picTitle+ '|' +item.valueCase3+'</h4>\n' +
                                '                    <div class="info-text">\n' +
                                '                        <p>案例作品：'+item.valueCase1+'&nbsp;&nbsp;从业经验：'+item.valueCase2+'年</p>\n' +
                                '                    </div>\n' +
                                '                </div>\n' +
                                '                <a class="case-img-contain" href="/'+item.id+'/sjsDetail.html">\n' +
                                '                    <img src="'+item.picUrl+'" alt="">\n' +
                                '                    <img src="" alt="">\n' +
                                '                </a>\n' +
                                '            </div>';
                        } else {
                            xxx = '<div class="common-case-list scroll-reveal-1"  style="; visibility: visible;  -webkit-transform: translateY(0) scale(1); opacity: 1;transform: translateY(0) scale(1); opacity: 1;-webkit-transition: -webkit-transform 1s ease-in-out 0s, opacity 1s ease-in-out 0s; transition: transform 1s ease-in-out 0s, opacity 1s ease-in-out 0s; ">\n' +
                                '                <div class="case-info-contain">\n' +
                                '                    <h4 class="info-title">'+item.picTitle+ '|' +item.valueCase3+'</h4>\n' +
                                '                    <div class="info-text">\n' +
                                '                        <p>案例作品：'+item.valueCase1+'&nbsp;&nbsp;从业经验：'+item.valueCase2+'年</p>\n' +
                                '                    </div>\n' +
                                '                </div>\n' +
                                '                <a class="case-img-contain switch-to-two" href="/'+item.id+'/sjsDetail.html">\n' +
                                '                    <img src="'+item.picUrl+'" alt="">\n' +
                                '                    <img src="'+item.picUrl+'" alt="">\n' +
                                '                </a>\n' +
                                '            </div>';
                        }

                        total ++;

                        lis.push(xxx);
                    });

                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < res.data.totalPage);
                });
            }
        });
    });
</script>

</html>